<template>
  <div>
    <Header title="XX资讯"><i class="el-icon-search" @click="$global.goPage('/mainSearch')"></i></Header>
    <el-container>
      <el-carousel>

        <el-carousel-item v-for="(item,i) in Banner" :key="i">
          <img :src="item.url" width="100%" height="100%"/>
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
<div class="content">
  <el-card class="box-card" v-for="(item,i) in NewsList" :key="i">
    <div slot="header" class="card-header">
      {{ item.title }}
    </div>
    <div>
      <div class="news">
        <p @click="disList($event)">{{item.content }}</p>

        <img v-if="item.img" :src="item.img" class="newsimg"/>
      </div>
      <div class="spacebetween">
        <div class="auth">by: {{item.author}}</div>
        <div class="auth">{{item.agree}}赞同·{{item.comment}}评论</div>

      </div>


    </div>

  </el-card>
</div>
    </el-container>
    <Footer></Footer>
  </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import {mapState} from 'vuex'
    export default {
        name: "home",
      components: {Footer, Header},
      computed:{...mapState({
          NewsList:state=>state.home.NewsList,
          Banner:state=>state.home.BannerList
      })},
      beforeCreate() {
        this.$store.dispatch('home/getBanner')
          this.$store.dispatch('home/getNewsList')
      },
      methods: {
        disList(e){
          if(e.target.style.whiteSpace==='pre-wrap'){
            e.target.style.whiteSpace='nowrap'
          }else {
            e.target.style.whiteSpace='pre-wrap'
          }
        }
        }
      }
</script>

<style lang="less" scoped>
/deep/ .el-card__header{
  padding: 5px 10px;
}
.box-card{
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
/deep/ .el-card__body{
  text-align: left;
  padding:0 10px;
}
.auth{
  font-size: 15px;
  color: #cccccc;
}
.news{
  width: 100%;
  display: flex;
  justify-content: space-between;
margin: 10px 0;
}
p{
  font-size: 17px;
  color: #656262;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.newsimg{
  width: 120px;
  height: 120px;
}
</style>
